<template>
  <div :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
import resize from '@/views/spareParts/statistical/charts/mixins/resize'
export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    workShopName: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(list) {
      let newchartName = ["January", "February", "March","April", "May", "June","July","August","September","October","November","December"]
      let barWidth = 30;
      let totalArry = newchartName.map(()=>1)
      let newchartValue1 = newchartName.map(()=>0)
      let newchartValue2 = newchartName.map(()=>0)
      const arr = list.filter(val=>val.floor === this.workShopName)
      if (arr && arr.length){
        arr.forEach(val=>{
          newchartValue1[parseInt(val.month) - 1] = Number(val.bdgAmount)
          newchartValue2[parseInt(val.month) - 1] = Number(val.planAmount)
        })
      }
      const option = {
        // tooltip: {
        //   trigger: 'item',
        // },
        grid: {
          top: 55,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:[
          {
            data: newchartName,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              margin: 15,
            },
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: newchartName
          }
        ],
        yAxis: {
          type: 'value',
          splitNumber: 5,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dotted',
             color: "rgba(255, 255, 255,0.4)"
    }
    },
          axisLabel: {
            textStyle: {
              color: '#C0E8FF',
              fontSize: 18,
            },
          },
          axisTick: {
            show:false,
            alignWithLabel: true
          }
        },
        series:[
          {
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["-80%", -5],
            symbolPosition: 'end',
            z: 12,
            itemStyle: {
              color: 'rgba(61,187,255,.16)',
              opacity: 1,
            },
            "data": totalArry
          },
          {
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["-80%", -5],
            symbolPosition: 'end',
            z: 12,
            color: "#3eb6f5",
            zlevel: 2,
            data: newchartValue1
          },
          {
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["-80%", 5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#3eb6f5'
                }, {
                  offset: 1,
                  color: '#3eb6f5'
                }], false)
              }
            },
            "data":  [1, 1, 1, 1, 1,1]
          },




          {
            name: '未开工',
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["80%", -5],
            symbolPosition: 'end',
            z: 12,
            itemStyle: {
              color: '#0924B8',
              opacity: 1,
            },
            "data": totalArry
          },
          {
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["80%", -5],
            symbolPosition: 'end',
            z: 12,
            color: "#025FFE",
            zlevel: 2,
            data: newchartValue2
          },
          {
            name: "",
            type: 'pictorialBar',
            symbolSize: [barWidth, 10],
            symbolOffset: ["80%", 5],
            z: 12,
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#322CE5'
                }, {
                  offset: 1,
                  color: '#322CE5'
                }], false)
              }
            },
            "data": [1, 1, 1, 1, 1,1]
          },

          {
            name: '未开工',
            type: 'bar',
            barWidth: barWidth,
            barGap:'60%',
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#1796D1'
                }, {
                  offset: 1,
                  color: '#49DEFF'
                }], false)
              }
            },
            label: {
              show: true,
              formatter: '{c}',
              position: 'top',
              color: '#3eb6f5',
              fontSize: 13,
              textAlign: 'center',
            },
            zlevel: 2,
            data: newchartValue1
          },

          {
            name: '未完成',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
              opacity: 1,
              color: function(params) {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#1752D1'
                }, {
                  offset: 1,
                  color: '#6149FF'
                }], false)
              }
            },
            label: {
              show: true,
              formatter: '{c}',
              position: 'top',
              color: '#6149FF',
              fontSize: 13,
              textAlign: 'center',
            },
            zlevel: 2,
            data: newchartValue2
          },
          {
            name: '已开工',
            type: 'bar',
            xAxisIndex: 1,
            data: totalArry,
            barGap:'60%',
            zlevel: 1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: 'rgba(61,187,255,.16)'
              }
            }
          },
          {
            name: '已完成',
            type: 'bar',
            xAxisIndex: 1,
            // barGap: '45%',
            data:totalArry,
            zlevel: 1,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                color: 'rgba(14, 41, 150, 1)'
              }
            }
          }
        ]
      };
      this.chart = echarts.init(this.$el)
      this.chart.setOption(option)
    }
  }
}
</script>
